const { merge } = require('webpack-merge')
const path = require('path')
const webpack = require('webpack')

const common = require('./webpack.common')
const { PROJECT_PATH, SERVER_HOST, SERVER_PORT } = require('../constant')

module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    target: 'web', // 避免webpack-dev-server 的热更新功能直接失效
    output: {
        filename: 'js/[name].js',
        path: path.resolve(PROJECT_PATH, './dist'),
        publicPath: '/',
    },
    optimization: {
        minimize: false,
        minimizer: [],
        splitChunks: {
          chunks: 'all',
          minSize: 0,
        },
      },
    devServer: {
        host: SERVER_HOST,
        port: SERVER_PORT,
        stats: 'errors-only',
        clientLogLevel: 'none',
        compress: true,
        open: true,
        hot: true,
        noInfo: true,
        historyApiFallback: {
			index: path.join(PROJECT_PATH, './public/index.html')
	    },
    },
    //   devServer的配置功能如下：

    //   host：服务ip

    // port：服务端口

    // stats：设为errors-only表示终端只打印错误类型的日志，不会打印warning以及其他信息影响阅读

    // compress：设为true表示启用gzip压缩，加快网站打开速度

    // open：设为true表示第一次启动项目时自动打开默认浏览器

    // hot：设为true表示启用服务热替换配置

    // clientLogLevel：设为none表示去除多余网页console信息

    // noInfo：设为true表示去除启动项目时显示的打包信息
    //     hot开启的是热替换而非热更新，webpack默认支持热更新
    // 热更新：当文件有修改时，刷新浏览器页面
    // 热替换：当文件有修改时，不刷新浏览器页面
    // 什么时候使用热替换：更改css和局部js变动时导致整个页面刷新调试体验差，开启热替换后不会导致页面刷新也能更改页面数据，调试更快
    plugins: [
        // 实际上只开启 hot：true 就会自动识别有无声明该插件，没有则自动引入，但是怕有隐藏问题这里还是手动加上了
        new webpack.HotModuleReplacementPlugin()
    ]
})